NaN

第 4 节 流程控制语句

前言

  1. 调试代码,找出代码中的问题经常使用 debugger 来打断点, 而要能在准确位置打上断点, 就必须熟悉程序的执行流程
  2. 流程控制语句有三种: 顺序结构, 分支结构和循环结构

(一) 顺序结构(默认)

  1. 程序默认从上到下一句一句代码执行, 这就是顺序结构
  2. 若是某一行代码出现了错误, 则后面的代码无法执行
<script>
var a = 1;
console.log('a=',a);
var b = 2;
console.log('b=',b);
var c = 3;
console.log('c=',d);
var d = 4;
console.log('d=',d);
</script>

(二) 分支结构

1. if else 

<script>
    // 需求: 根据学生成绩来评等级
    // 60分以下 不及格
    // 60-80(不包含) 及格
    // 80(包含) 以上优秀

    // 分数
    var score = 70;

    if (score < 60) {
        document.write('该学生成绩不及格');
    } else if (score < 80) {
        document.write('该学生成绩及格');
    } else {
        document.write('该学生成绩优秀')
    }

    if (score > 80) {
        console.log('优秀')
    } else if (score >= 60) {
        console.log('及格');
    } else {
        console.log('不及格');
    }
</script>

需求1: 根据一个人年龄进行分段
1. 在页面输出这个人所属阶段
2. 具体规则如下
未成年人：0至17岁；
青年人： 18岁至65岁；
中年人： 66岁至79岁；
老年人： 80岁至99岁；

2. 三目运算符 

var isLogin = false;
var text = '';
if(isLogin) {
  text = '13800000000';
} else {
  text = '立即登录';
}

// 更简洁的表达方式
var text = isLogin?'13800000000':'立即登录';
console.log(text);

var str = prompt('请输入性别');
var gender === '1':'男人':'女人';
console.log('性别是:',gender);

3. switch 

<script>
    // 选择城市
    var cityName = prompt('请输入城市简写');

    switch (cityName) {
        case 'sz':
            console.log('切换到深圳市');
            break
        case 'gz':
            console.log('切换到广州市');
            break
        case 'bj':
            console.log('切换到北京市');
            break;
        case 'sh':
            console.log('切换到上海市');
            break;
        default:
            console.log('这个城市暂时没有数据');

    }
</script>

练习:

  1. 月和日小于 10 则在其前面添加 0 变为两位数

    var month = 5;
var day = 4
//

  2. 麦当楼的饮料机有四个按钮, 按钮 1 得到橙汁,按钮 2 得到牛奶, 按钮 3 得到啤酒, 按钮 4 得到咖啡,

请编写一个程序, 弹出一个窗口, 用户输入的的数字不同, 弹出不同的饮料.

(三) 循环结构

01 标准 for 循环部分

(1)循环变量初始值 (2)循环条件 (3)改变循环条件 (4)循环体

循环规律:

  • 第一轮 先执行第一部分, 再执行第二部分, 然后执行第三部分, 最后执行第四部分, 简称 1243

  • 第二轮开始 先执行第二部分(第一部不再执行), 然后执行第三部分, 最后执行第四部分,直到结束, 简称 243

    // demo1
// 第1轮 i=0,条件满足,运行循环体
// 第2轮 i=1,条件满足,运行循环体
// 第3轮 i=2,条件满足,运行循环体
// 第4轮 i=3,条件不满足,终止循环
// 所以循环体被执行了三次,结果为0,1,2
for (var i=0;i<3;i++) {
	console.log(i);
}

02 应用

1.应用 demo 

// 应用1:计算总和
var sum = 0;
for (var i=0;i<3;i++) {
	console.log(i);
  // sum = sum + i;
  sum += i;
}
console.log(sum);

// 应用2: 拼接字符串,输出到网页上
<script>
    var str = '';
     for (var i=0;i<5;i++) {
        str += 'a';
     }
     document.write(str); // 屏幕显示5个a
</script>

2. 练习:

  1. 练习 1: 计算 1~100 的和并输出到页面上

  2. 练习 2: 使用 for 循环在网页上打印一个 ul 列表,列表有 5 个 li,li 的内容任意

    进阶: 给 li 内容添加序号(从 1 开始);

    <script>
    var str = '';
     for (var i=0;i<5;i++) {
        str += '<li>I have a dream</li>';
     }
     document.write('<ul>')

     document.write(str);
     document.write('</ul>')
</script>

<script>
    var str = '';
     for (var i=0;i<5;i++) {
        str += `<li>${i+1}. I have a dream</li>`;
     }
     document.write('<ul>')
     document.write(str);
     document.write('</ul>')
</script>

    2. continue 和 break 

<script>
  	// continue继续
    for (var i = 0; i < 10; i++) {

        if (i === 5) {
            continue;
        }
        // continue之后的代码不再执行直接进入下一轮循环,所以当i===5时,i不打印
        console.log(i);
    }
</script>

<script>
  	// break 中断
    for (var i = 0; i < 10; i++) {

        if (i === 5) {
            break;
        }
        // break后, 本层循环终止
        console.log(i);
    }
</script>

3. 死循环

  1. 循环的四个部分并不是必须的

    <script>
    var i = 0
  	// for循环缺少初始部分
    for (; i < 10; i++) {
        console.log(i);
    }
</script>

<script>
    var i = 0
  	// 缺少两部分
    for (;i < 10;) {
        console.log(i);
        i++
    }
</script>

<script>
    var i = 0
  	// 三部分都没有,其实四部分都没有也是可以的, 只是没有意义
    for (;;) {
        console.log(i);
        if(i>5) {
            break;
        }
        i++
    }
</script>

  2. 死循环就是循环条件永远满足条件导致循环用不终止, 直到关闭浏览器

    <script>
    var i = 10;
    for (;i>5;) {
        console.log(22222);
    }
</script>

<script>
    for (;;) {
        console.log(22222);
    }
</script>

4.while 和 do while

5. 数组遍历和对象遍历(进阶应用)

for 循坏进阶应用

  1. 将数组成员(成员为基本数据类型)输出到页面上
<script>
    var list = ['香蕉', '苹果', '雪梨', '火龙果'];
    for (var i = 0; i < list.length; i++) {
        // 循环体执行的次数等于数组的长度
        console.log(list[i]); // 会一次打印出数组的每一个成员
    }

    // 将成员放入li内在输出到页面上
    var str = '';
    for (var i = 0; i < list.length; i++) {
        str += `<li>${list[i]}</li>`;
    }
    document.write('<ul>')
    document.write(str)
    document.write('</ul>')
</script>
  1. 将数组成员(成员为引用类型)输出到页面上
<script>
    // 将数组成员的姓名和年龄输出到页面上, 一个成员一个li
    var list = [
        {username: '张三1', age: 18},
        {username: '张三2', age: 19},
        {username: '张三3', age: 20},
        {username: '张三4', age: 21},
        {username: '张三5', age: 22},
    ]
    var str = '';
    for(var i=0;i<list.length;i++) {
        console.log(list[i]);
        str += `<li>姓名: ${list[i].username} 年龄: ${list[i].age}岁</li>`
    }
    document.write('<ul>')
    document.write(str)
    document.write('</ul>')
</script>

练习: 把身边的成员数组输出到页面上

  1. 先写好 ul 和 li 的样式, 将数组成员按写好的样式输出到页面上

(四) 简单的 Dom 操作

  1. 获取网页内的元素节点

    var app = document.getElementById('app');  // 获取id为app的元素节点, 并将节点存放在变量app内

  2. 给元素节点填充内容

    // 填充文本
app.innerHtml = 'hello world';
// 填充标签
app.innerHtml = '<div>老胡</div>';
// 字符串拼接变量
var username = 'laohu';
app.innerHtml = '<div>'+username+'</div>';  // 数据多的时候,拼接不方便

  3. 模板字符串, 字符串中的变量使用${变量名}代替

  4. 使用模板字符串拼接长串标签

资料 1: 课堂练习

  1. 计算 1 至 100 累加的值

  2. 把数组的成员展示到页面上

    • 字符串拼接方式
    • 模板字符串使用
     var fruits = ['香蕉', '苹果', '雪梨', '火龙果'];

  3. 编程题

    要求:
(1)收集本小组成员个人信息, 做成一个数组, 并且使用for循环把成员信息输出到网页上
(2)成员信息包含姓名, 年龄, 性别, 籍贯, 爱好
(3)可以设置适当的样式

资料 2: 作业

  1. 渲染电影列表和影院列表

  2. 二维数组

    当数组的成员也是数组时, 我们把这个数组称为二维数组, 有以下二维数组, 计算所有所有成员总和

    var list = [
[1,3,5],
[2,4,6],
[3,6,9]
]
 var sum = 0;
for(var i=0;i<list.length;i++) {
 var sum2 = 0;
 for(var j=0;j<list[i].length;j++) {
     sum2 += list[i][j];
 }
 sum += sum2;
}
console.log(sum); 

// 方式2
var sum = 0;
for(var i=0;i<list.length;i++) { 
 for(var j=0;j<list[i].length;j++) {
     sum += list[i][j];
 } 
}
console.log(sum);

  3. 生成 99 乘法表

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .num {
        margin-left: 20px;
        font-size: 16px;
        border: 1px solid greenyellow;
        background-color: greenyellow;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        border-radius: 50%;
      }
      p:nth-child(odd) {
        color: red;
      }
    </style>
  </head>
  <body>
    <pre>
需求: 点击按钮生成乘法口诀表, 样式自理
    </pre
    >
    <button onclick="create()">生成</button>
    <div class="box"></div>

    <script>
      function create() {
        var all = "";
        for (var i = 1; i <= 9; i++) {
          var str = "";
          for (var j = 1; j <= i; j++) {
            str += `<span style="margin-right:5px;">${j}X${i}=${j * i}</span>`;
          }
          all += `<p>${str} <span class="num">${i}</span></p>`;
        }
        document.querySelector(".box").innerHTML = all;
      }
    </script>
  </body>
</html>